<template>
  <a-card :bordered="false">
    <a-spin :spinning="isLoading">
      <div class="card-title">{{ $route.meta.title }}</div>
      <div class="table-operator">
        <!-- 搜索板块 -->
        <a-row class="row-item-search">
          <a-form class="search-form" :form="searchForm" layout="inline" @submit="handleSearch">
            <a-form-item label="订单查询">
              <a-input style="width: 337px" placeholder="请输入关键词" v-decorator="['searchValue']">
                <a-select
                  slot="addonBefore"
                  v-decorator="['searchType', { initialValue: -1 }]"
                  style="width: 100px"
                >
                  <a-select-option
                    v-for="(item, index) in SearchTypeEnum"
                    :key="index"
                    :value="item.value"
                  >{{ item.name }}</a-select-option>
                </a-select>
              </a-input>
            </a-form-item>
            <a-form-item label="订单来源">
              <a-select v-decorator="['orderSource', { initialValue: -1 }]">
                <a-select-option :value="-1">全部</a-select-option>
                <a-select-option
                  v-for="(item, index) in OrderSourceEnum.data"
                  :key="index"
                  :value="item.value"
                >{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="支付方式">
              <a-select v-decorator="['payMethod', { initialValue: '' }]">
                <a-select-option value>全部</a-select-option>
                <a-select-option
                  v-for="(item, index) in PaymentMethodEnum.data"
                  :key="index"
                  :value="item.value"
                >{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="配送方式">
              <a-select v-decorator="['deliveryType', { initialValue: -1 }]">
                <a-select-option :value="-1">全部</a-select-option>
                <a-select-option
                  v-for="(item, index) in DeliveryTypeEnum.data"
                  :key="index"
                  :value="item.value"
                >{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="下单时间">
              <a-range-picker format="YYYY-MM-DD" v-decorator="['betweenTime']" />
            </a-form-item>

            <a-form-item label="自提门店">
              <a-select v-decorator="['extractShopId', { initialValue: 0 }]">
                <a-select-option :value="0">全部</a-select-option>
                <a-select-option
                  v-for="(item, index) in shopList"
                  :key="index"
                  :value="item.shop_id"
                >{{ item.shop_name }}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item class="search-btn">
              <a-button class="mr-15" type="primary" icon="search" html-type="submit">搜索</a-button>
              <a-button @click="handleReset">重置</a-button>
            </a-form-item>
          </a-form>
        </a-row>
      </div>
      <!-- 列表内容 -->
      <div class="ant-table ant-table-scroll-position-left ant-table-default ant-table-bordered">
        <div class="ant-table-content">
          <div class="ant-table-body">
            <table>
              <thead class="ant-table-thead">
                <tr>
                  <th v-for="(item, index) in columns" :key="index">
                    <span class="ant-table-header-column">
                      <div>
                        <span class="ant-table-column-title">{{ item.title }}</span>
                      </div>
                    </span>
                  </th>
                </tr>
              </thead>
              <tbody class="ant-table-tbody">
                <template v-for="(item) in orderList.data">
                  <tr class="order-empty" :key="`order_${item.order_id}_1`">
                    <td colspan="9"></td>
                  </tr>
                  <tr :key="`order_${item.order_id}_2`">
                    <td colspan="9">
                      <span class="mr-20">{{ item.create_time }}</span>
                      <span class="mr-20">订单号：{{ item.order_no }} 
						<a title="点击复制订单号" @click="clickCopy(item.order_no, 1)"><i class="icon anticon">
							<svg t="1729502566081" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1938" width="16" height="16"><path d="M96.1 575.7a32.2 32.1 0 1 0 64.4 0 32.2 32.1 0 1 0-64.4 0Z" fill="#4D4D4D" p-id="1939"></path><path d="M742.1 450.7l-269.5-2.1c-14.3-0.1-26 13.8-26 31s11.7 31.3 26 31.4l269.5 2.1c14.3 0.1 26-13.8 26-31s-11.7-31.3-26-31.4zM742.1 577.7l-269.5-2.1c-14.3-0.1-26 13.8-26 31s11.7 31.3 26 31.4l269.5 2.1c14.3 0.2 26-13.8 26-31s-11.7-31.3-26-31.4z" fill="#4D4D4D" p-id="1940"></path><path d="M736.1 63.9H417c-70.4 0-128 57.6-128 128h-64.9c-70.4 0-128 57.6-128 128v128c-0.1 17.7 14.4 32 32.2 32 17.8 0 32.2-14.4 32.2-32.1V320c0-35.2 28.8-64 64-64H289v447.8c0 70.4 57.6 128 128 128h255.1c-0.1 35.2-28.8 63.8-64 63.8H224.5c-35.2 0-64-28.8-64-64V703.5c0-17.7-14.4-32.1-32.2-32.1-17.8 0-32.3 14.4-32.3 32.1v128.3c0 70.4 57.6 128 128 128h384.1c70.4 0 128-57.6 128-128h65c70.4 0 128-57.6 128-128V255.9l-193-192z m0.1 63.4l127.7 128.3H800c-35.2 0-64-28.8-64-64v-64.3h0.2z m64 641H416.1c-35.2 0-64-28.8-64-64v-513c0-35.2 28.8-64 64-64H671V191c0 70.4 57.6 128 128 128h65.2v385.3c0 35.2-28.8 64-64 64z" fill="#4D4D4D" p-id="1941"></path></svg>
						</i>
						</a>
					  </span>
					  <span class="mr-20" v-if="item.delivery.length">物流单号：{{ item.delivery[0].express_no }}
					  <a title="点击复制运单号" @click="clickCopy(item.delivery[0].express_no, 1)"><i class="icon anticon">
					  	<svg t="1729502566081" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1938" width="16" height="16"><path d="M96.1 575.7a32.2 32.1 0 1 0 64.4 0 32.2 32.1 0 1 0-64.4 0Z" fill="#4D4D4D" p-id="1939"></path><path d="M742.1 450.7l-269.5-2.1c-14.3-0.1-26 13.8-26 31s11.7 31.3 26 31.4l269.5 2.1c14.3 0.1 26-13.8 26-31s-11.7-31.3-26-31.4zM742.1 577.7l-269.5-2.1c-14.3-0.1-26 13.8-26 31s11.7 31.3 26 31.4l269.5 2.1c14.3 0.2 26-13.8 26-31s-11.7-31.3-26-31.4z" fill="#4D4D4D" p-id="1940"></path><path d="M736.1 63.9H417c-70.4 0-128 57.6-128 128h-64.9c-70.4 0-128 57.6-128 128v128c-0.1 17.7 14.4 32 32.2 32 17.8 0 32.2-14.4 32.2-32.1V320c0-35.2 28.8-64 64-64H289v447.8c0 70.4 57.6 128 128 128h255.1c-0.1 35.2-28.8 63.8-64 63.8H224.5c-35.2 0-64-28.8-64-64V703.5c0-17.7-14.4-32.1-32.2-32.1-17.8 0-32.3 14.4-32.3 32.1v128.3c0 70.4 57.6 128 128 128h384.1c70.4 0 128-57.6 128-128h65c70.4 0 128-57.6 128-128V255.9l-193-192z m0.1 63.4l127.7 128.3H800c-35.2 0-64-28.8-64-64v-64.3h0.2z m64 641H416.1c-35.2 0-64-28.8-64-64v-513c0-35.2 28.8-64 64-64H671V191c0 70.4 57.6 128 128 128h65.2v385.3c0 35.2-28.8 64-64 64z" fill="#4D4D4D" p-id="1941"></path></svg>
					  </i>
					  </a>
					  </span>
                      <platform-icon :name="item.platform" :showTips="true" />
                    </td>
                  </tr>
                  <tr
                    v-for="(goodsItm, goodsIdx) in item.goods"
                    :key="`orderGoods_${item.order_id}_${goodsIdx}`"
                  >
                    <td>
                      <GoodsItem
                        :data="{
                          image: goodsItm.goods_image,
                          imageAlt: '商品图片',
                          title: goodsItm.goods_name,
                          goodsProps: goodsItm.goods_props
                        }"
                      />
                    </td>
                    <td>
                      <p>￥{{ goodsItm.goods_price }}</p>
                      <p>×{{ goodsItm.total_num }}</p>
                    </td>
                    <template v-if="goodsIdx===0">
                      <td :rowspan="item.goods.length">
                        <p>订单金额：￥{{ item.order_price }}</p>
                        <p class="c-muted-1">(运费：￥{{ item.express_price }})</p>
                      </td>
                      <td :rowspan="item.goods.length">
						  <!-- <p class="mtb-2">
							  <span class="f-13">姓名：</span>
							  <a-tag>{{item.user.nick_name}}</a-tag>
						  </p>
						  <p class="mtb-2">
							  <span class="f-13">电话：</span>
							  <a-tag>{{item.user.mobile}}</a-tag>
						  </p> -->
						  <p class="mtb-2">
							  <div v-if="item.real_name">
							  	<div class="user-info clearfix">
							  	 <div class="in-left">
							  	   <a-tooltip>
							  	      <p class="user-name oneline-hide">经销商ID: {{ item.user.user_id }}</p>
							  			<!-- <template slot="title">姓名: {{ users.nick_name }}</template> -->
							  			<p class="user-name oneline-hide">姓名: {{ item.real_name ? item.real_name : item.user.nick_name }}</p>
							  			<p class="user-name oneline-hide">电话: {{ item.user.mobile }}</p>
							  	     <!-- <img v-if="user.user.avatar_url.length" :src="user.user.avatar_url" alt="经销商头像" />
							  	      <img v-else src="~@/assets/img/default-avatar.png" alt="经销商头像" /> -->
							  	    </a-tooltip>
							  	  </div>
							  	  <!-- <div class="in-right flex flex-dir-column flex-x-center"> -->
							  	    <!-- <p class="user-name oneline-hide">{{ user.real_name ? user.real_name : user.nick_name }}</p> -->
							  	   <!-- <p class="user-platform">
							  	      <platform-icon :name="user.platform" :showTips="true" />
							  	    </p> -->
							  	  <!-- </div> -->
							  	</div>
							  </div>
							  <div v-else>
							  	<UserItem :user="item.user" />
							  </div>
						  </p>
						  <!-- </span> -->
                        <!-- <UserItem :user="item.user" /> -->
                      </td>
                      <td :rowspan="item.goods.length">
                        <a-tag v-if="item.pay_method">{{ PaymentMethodEnum[item.pay_method].name }}</a-tag>
                        <span v-else>--</span>
                      </td>
                      <td :rowspan="item.goods.length" >
                        <a-tag>{{ DeliveryTypeEnum[item.delivery_type].name }}</a-tag>
						<div v-if="item.address != null" >
						<p class="mtb-2">
						  <span class="f-13">收件人: </span>
						  <span >{{item.address.name}}</span>
						</p>
						<p class="mtb-2">
						  <span class="f-13">手机号: </span>
						  <span>{{item.address.phone}}</span>
						</p>
						<p class="mtb-2">
						  
						  <div style="white-space: nowrap; text-overflow:ellipsis; overflow: hidden; max-width:250px;">
							  <span class="f-13">地址: </span>
							  <span :title="item.address.detail">
							  {{item.address.detail}}
							  </span>
						  </div>
						  <a title="点击复制发货信息" @click="clickCopy(item,2)"><i class="icon anticon">
						  	<svg t="1729502566081" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1938" width="16" height="16"><path d="M96.1 575.7a32.2 32.1 0 1 0 64.4 0 32.2 32.1 0 1 0-64.4 0Z" fill="#4D4D4D" p-id="1939"></path><path d="M742.1 450.7l-269.5-2.1c-14.3-0.1-26 13.8-26 31s11.7 31.3 26 31.4l269.5 2.1c14.3 0.1 26-13.8 26-31s-11.7-31.3-26-31.4zM742.1 577.7l-269.5-2.1c-14.3-0.1-26 13.8-26 31s11.7 31.3 26 31.4l269.5 2.1c14.3 0.2 26-13.8 26-31s-11.7-31.3-26-31.4z" fill="#4D4D4D" p-id="1940"></path><path d="M736.1 63.9H417c-70.4 0-128 57.6-128 128h-64.9c-70.4 0-128 57.6-128 128v128c-0.1 17.7 14.4 32 32.2 32 17.8 0 32.2-14.4 32.2-32.1V320c0-35.2 28.8-64 64-64H289v447.8c0 70.4 57.6 128 128 128h255.1c-0.1 35.2-28.8 63.8-64 63.8H224.5c-35.2 0-64-28.8-64-64V703.5c0-17.7-14.4-32.1-32.2-32.1-17.8 0-32.3 14.4-32.3 32.1v128.3c0 70.4 57.6 128 128 128h384.1c70.4 0 128-57.6 128-128h65c70.4 0 128-57.6 128-128V255.9l-193-192z m0.1 63.4l127.7 128.3H800c-35.2 0-64-28.8-64-64v-64.3h0.2z m64 641H416.1c-35.2 0-64-28.8-64-64v-513c0-35.2 28.8-64 64-64H671V191c0 70.4 57.6 128 128 128h65.2v385.3c0 35.2-28.8 64-64 64z" fill="#4D4D4D" p-id="1941"></path></svg>
						  </i>
						  </a>
						</p>
						
						</div>
                      </td>
                      <td :rowspan="item.goods.length">
                        <p class="mtb-2">
                          <span class="f-13">付款状态：</span>
                          <a-tag
                            :color="item.pay_status == PayStatusEnum.SUCCESS.value ? 'green' : ''"
                          >{{ PayStatusEnum[item.pay_status].name }}</a-tag>
                        </p>
                        <p class="mtb-2">
                          <span class="f-13">发货状态：</span>
                          <a-tag
                            :color="item.delivery_status == DeliveryStatusEnum.DELIVERED.value ? 'green' : ''"
                          >{{ DeliveryStatusEnum[item.delivery_status].name }}</a-tag>
                        </p>
                        <p class="mtb-2">
                          <span class="f-13">收货状态：</span>
                          <a-tag
                            :color="item.receipt_status == ReceiptStatusEnum.RECEIVED.value ? 'green' : ''"
                          >{{ ReceiptStatusEnum[item.receipt_status].name }}</a-tag>
                        </p>
						<p class="mtb-2" v-if="item.delivery.length">
							<span class="f-13">查看物流：</span>					  
							  <a-tag @click="handleExpress(item)">{{ item.delivery[0].express_no }}</a-tag>
						</p>
                        <p
                          v-if="[OrderStatusEnum.CANCELLED.value,OrderStatusEnum.APPLY_CANCEL.value].includes(item.order_status)"
                          class="mtb-2"
                        >
                          <span class="f-13">订单状态：</span>
                          <a-tag
                            :color="renderOrderStatusColor(item.order_status)"
                          >{{ OrderStatusEnum[item.order_status].name }}</a-tag>
                        </p>
                      </td>
					  <td :rowspan="item.goods.length">
					    <div style="white-space: nowrap; text-overflow:ellipsis; overflow: hidden; max-width:250px;">
							  <span class="f-13">商家备注: </span>
							  <span :title="item.merchant_remark">
							  {{item.merchant_remark}}
							  </span>
					    </div>
					  </td>
                      <td :rowspan="item.goods.length">
                        <div class="actions">
                         <!-- <router-link
                            v-if="$auth('/order/detail')"
                            :to="{ path: '/order/detail', query: { orderId: item.order_id } }"
                          >详情</router-link> -->
						  <a
						    v-action:detail
						    @click="handleDetail(item)"
						  >详情</a>
						  <a
						    v-action:detail
							v-if="(
							  item.pay_status == PayStatusEnum.SUCCESS.value
							    && item.delivery_type == DeliveryTypeEnum.EXPRESS.value
							    && item.delivery_status != DeliveryStatusEnum.NOT_DELIVERED.value
							    && !inArray(item.order_status, [OrderStatusEnum.CANCELLED.value, OrderStatusEnum.APPLY_CANCEL.value])
							)"
						    @click="handleExpressOn(item)"
						  >物流单号</a>
                          <a
                            v-action:deliver
                            v-if="(
                              item.pay_status == PayStatusEnum.SUCCESS.value
                                && item.delivery_type == DeliveryTypeEnum.EXPRESS.value
                                && item.delivery_status != DeliveryStatusEnum.DELIVERED.value
                                && !inArray(item.order_status, [OrderStatusEnum.CANCELLED.value, OrderStatusEnum.APPLY_CANCEL.value])
                            )"
                            @click="handleDelivery(item)"
                          >发货</a>
                          <a
                            v-action:extract
                            v-if="(
                              item.pay_status == PayStatusEnum.SUCCESS.value
                                && item.delivery_type == DeliveryTypeEnum.EXTRACT.value
                               && item.delivery_status != DeliveryStatusEnum.DELIVERED.value
                                && !inArray(item.order_status, [OrderStatusEnum.CANCELLED.value, OrderStatusEnum.APPLY_CANCEL.value])
                            )"
                            @click="handleExtract(item)"
                          >自提核销</a>
                          <a
                            v-action:cancel
                            v-if="item.pay_status == PayStatusEnum.SUCCESS.value
							&& item.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value && !inArray(item.order_status, [OrderStatusEnum.CANCELLED.value, OrderStatusEnum.APPLY_CANCEL.value])"
                            @click="handleCancel(item)"
                          >取消订单并退款</a>
						  <a
						    v-action:cancel
						    v-if="item.pay_status == PayStatusEnum.PENDING.value && !inArray(item.order_status, [OrderStatusEnum.CANCELLED.value, OrderStatusEnum.APPLY_CANCEL.value])"
						    @click="handleCancel(item)"
						  >取消订单</a>
						  <a
						    v-action:cancel
						    v-if="item.order_status == OrderStatusEnum.APPLY_CANCEL.value"
						    @click="handleAuthCancel(item)"
						  >审核取消</a>
                          <!-- <a v-action:delete @click="handleDelete(item)">删除</a> -->
						  <a
						    v-action:remark
						    @click="handleRemark(item)"
						  >备注</a>
                        </div>
                      </td>
                    </template>
                  </tr>
                </template>
              </tbody>
            </table>
          </div>
          <!-- 空状态 -->
          <a-empty v-if="!orderList.data.length" :image="simpleImage" />
        </div>
      </div>
      <!-- 分页器 -->
      <div v-if="orderList.data.length" class="pagination">
        <a-pagination
          :current="page"
          :pageSize="orderList.per_page"
          :total="orderList.total"
          @change="onChangePage"
        />
      </div>
      <DeliveryForm ref="DeliveryForm" @handleSubmit="handleRefresh" />
      <ExtractForm ref="ExtractForm" @handleSubmit="handleRefresh" />
      <CancelForm ref="CancelForm" @handleSubmit="handleRefresh" />
	  <DetailForm ref="DetailForm" @handleSubmit="handleRefresh" />
	  <ExpressOnForm ref="ExpressOnForm" @handleSubmit="handleRefresh" />
	  <RemarkForm ref="RemarkForm" @handleSubmit="handleRefresh" />
	  <ExpressForm ref="ExpressForm" />
    </a-spin>
  </a-card>
</template>

<script>
import { Empty } from 'ant-design-vue'
import { inArray, assignment } from '@/utils/util'
import * as Api from '@/api/order'
import * as EventApi from '@/api/order/event'
import * as ShopApi from '@/api/store/shop'
import PlatformIcon from '@/components/PlatformIcon'
import { GoodsItem, UserItem } from '@/components/Table'
import {
  DeliveryStatusEnum,
  DeliveryTypeEnum,
  OrderSourceEnum,
  OrderStatusEnum,
  PayStatusEnum,
  ReceiptStatusEnum
} from '@/common/enum/order'
import { PaymentMethodEnum } from '@/common/enum/payment'
import { DeliveryForm, ExtractForm, CancelForm, DetailForm, ExpressForm,ExpressOnForm,RemarkForm} from './modules'
// import { Detail } from './Detail'

// 表格字段
const columns = [
  {
    title: '商品信息',
    align: 'center',
    dataIndex: 'goods',
    scopedSlots: { customRender: 'goods' }
  },
  {
    title: '单价/数量',
    align: 'center',
    scopedSlots: { customRender: 'unit_price' }
  },
  {
    title: '实付款',
    align: 'center',
    dataIndex: 'pay_price',
    scopedSlots: { customRender: 'pay_price' }
  },
  {
    title: '买家',
    dataIndex: 'user',
    scopedSlots: { customRender: 'user' }
  },
  {
    title: '支付方式',
    dataIndex: 'pay_method',
    scopedSlots: { customRender: 'pay_method' }
  },
  {
    title: '配送方式',
    dataIndex: 'delivery_type',
    scopedSlots: { customRender: 'delivery_type' }
  },
  {
    title: '交易状态',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '商家备注',
    dataIndex: 'merchant_remark',
    scopedSlots: { customRender: 'merchant_remark' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '180px',
    scopedSlots: { customRender: 'action' }
  }
]

// 搜索关键词类型枚举
const SearchTypeEnum = [
  { name: '全部', value: -1 },
  { name: '订单号', value: 10 },
  { name: '经销商昵称', value: 20 },
  { name: '经销商ID', value: 30 },
  { name: '收件人姓名', value: 40 },
  { name: '收件人电话', value: 50 },
  { name: '物流单号', value: 60 },
]

export default {
  name: 'Index',
  components: {
    PlatformIcon,
    GoodsItem,
    UserItem,
    DeliveryForm,
    ExtractForm,
    CancelForm,
	DetailForm,
	ExpressForm,
	ExpressOnForm,
	RemarkForm
  },
  data () {
    return {
      // 订单类型
      dataType: this.getDataType(),
      // 当前表单元素
      searchForm: this.$form.createForm(this),
      // 查询参数
      queryParam: {},
      // 正在加载
      isLoading: false,
      // 表格字段
      columns,
      // 当前页码
      page: 1,
      // 列表数据
      orderList: { data: [], total: 0, per_page: 10 },
      // 自提门店列表
      shopList: []
    }
  },
  beforeCreate () {
    // 批量给当前实例赋值
    assignment(this, {
      inArray,
      DeliveryStatusEnum,
      DeliveryTypeEnum,
      OrderSourceEnum,
      OrderStatusEnum,
      PayStatusEnum,
      ReceiptStatusEnum,
      PaymentMethodEnum,
      SearchTypeEnum,
      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE
    })
  },
  watch: {
    // 监听路由变化
    $route () {
      this.init()
    }
  },
  created () {
    // 初始化页面
    this.init()
    // 获取门店列表
    this.getShopList()
  },
  methods: {

    // 初始化页面
    init () {
      this.dataType = this.getDataType()
      this.searchForm.resetFields()
      this.queryParam = {}
      this.handleRefresh(true)
    },

    // 获取门店列表
    getShopList () {
      ShopApi.all().then(result => {
        this.shopList = result.data.list
      })
    },
	clickCopy(order, type){
		const app = this
		let oInput = document.createElement('input');
		if(type == 1){
			oInput.value = order;
		} else {
			oInput.value = '收件人: '+order.address.name+' 手机号: '+order.address.phone+' 地址：'+order.address.region.province+order.address.region.city+order.address.region.region+order.address.detail
		}
		document.body.appendChild(oInput);
		oInput.select(); // 选择对象;
		document.execCommand("Copy"); // 执行浏览器复制命令
		app.$message.success('复制成功')
	},
    // 获取当前标签
    getDataType () {
      return this.$route.path.split('/')[3]
    },

    // 获取列表数据
    getList () {
      const { dataType, queryParam, page } = this
      this.isLoading = true
      return Api.list({ dataType, ...queryParam, page })
        .then(response => {
          this.orderList = response.data.list
        })
        .finally(() => {
          this.isLoading = false
        })
    },

    // 渲染订单状态标签颜色
    renderOrderStatusColor (orderStatus) {
      const { OrderStatusEnum } = this
      const ColorEnum = {
        [OrderStatusEnum.NORMAL.value]: '',
        [OrderStatusEnum.CANCELLED.value]: 'red',
        [OrderStatusEnum.APPLY_CANCEL.value]: 'red',
        [OrderStatusEnum.COMPLETED.value]: 'green'
      }
      return ColorEnum[orderStatus]
    },

    /**
     * 刷新列表
     * @param Boolean bool 强制刷新到第一页
     */
    handleRefresh (bool = false) {
      bool && (this.page = 1)
      this.getList()
    },

    // 确认搜索
    handleSearch (e) {
      e.preventDefault()
      this.searchForm.validateFields((error, values) => {
        if (!error) {
          this.queryParam = { ...this.queryParam, ...values }
          this.handleRefresh(true)
        }
      })
    },

    // 重置搜索表单
    handleReset () {
      this.searchForm.resetFields()
    },

    // 翻页事件
    onChangePage (current) {
      this.page = current
      this.handleRefresh()
    },

    // 删除记录
    handleDelete (item) {
      const app = this
      const modal = app.$confirm({
        title: '您确定要删除该订单记录吗?',
        content: '删除后不可恢复，请谨慎操作',
        onOk () {
          return EventApi.deleted(item.order_id)
            .then((result) => {
              app.$message.success(result.message, 1.5)
              app.handleRefresh()
            })
            .finally(result => {
              modal.destroy()
            })
        }
      })
    },

    // 订单发货
    handleDelivery (record) {
		console.log(this.$refs.DeliveryForm)
      this.$refs.DeliveryForm.show(record)
    },
	handleDetail(record) { 
		this.$nextTick(()=>{
			this.$refs.DetailForm.show(record)
		})
	},
	handleExpress(record) {
		this.$nextTick(()=>{
			this.$refs.ExpressForm.show(record)
		})
	},
	handleExpressOn(record) {
		this.$nextTick(()=>{
			this.$refs.ExpressOnForm.show(record)
		})
	},
	handleRemark(record){
		this.$nextTick(()=>{
			this.$refs.RemarkForm.show(record)
		})
	},
    // 自提核销
    handleExtract (record) {
      this.$refs.ExtractForm.show(record)
    },

    // 审核取消订单
    handleAuthCancel (record) {
      this.$refs.CancelForm.show(record)
    },
	// 取消订单
	handleCancel (item) {
	  const app = this
	  const modal = app.$confirm({
	    title: '您确定要取消该订单记录吗?',
	    content: '取消后不可恢复，请谨慎操作',
	    onOk () {
	      return EventApi.cancel(item.order_id)
	        .then((result) => {
	          app.$message.success(result.message, 1.5)
	          app.handleRefresh()
	        })
	        .finally(result => {
	          modal.destroy()
	        })
	    }
	  })
	}
  }
}
</script>
<style lang="less" scoped>
// 分页器
.pagination {
  margin-top: 16px;
  .ant-pagination {
    float: right;
  }
}

.ant-table {
  table {
    border: none;
    border-collapse: collapse;
  }
  .ant-table-thead > tr {
    border: 1px solid #e8e8e8;
  }
  tr.order-empty {
    height: 15px;
    border: 1px solid #fff;
    td {
      padding: 0;
      border-right: none;
      border-left: none;
      background: none !important;
    }
  }
}

.ant-table-thead > tr > th {
  border-right: none;
  border-bottom: none;
  padding: 12px 12px;
  font-weight: bold;
}
.ant-table-tbody > tr > td {
  border-right: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
  padding: 12px 12px;
  // text-align: center;
}
</style>
